<template>
	<view class="frame">
		<view class="city-image"><!--轮播图*-->
			<swiper circular :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/xz1.jpg" style="width: 100%;" />
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/xz2.jpg" style="width: 100%;" />
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/xz3.jpg" style="width: 100%;" />
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<view class="frame">
		<view class="citytext"><!-- 介绍文本 -->
			<view class="citytitle1">西藏介绍<br></view>
			<view class="citytitle2">雪域圣地・西藏<br></view>
			<view class="citytitle3">历史文化：西藏是藏文化的核心发源地，拥有千年历史，吐蕃王朝时期文化空前繁荣，
				藏传佛教文化、吐蕃历史遗迹共同构成其独特文明脉络。<br></view>
			<view class="citytitle3">著名景点：大昭寺、雅鲁藏布大峡谷、南迦巴瓦峰</view>
			<rich-text :nodes="richTextNodes"></rich-text>
			<view class="citytitle3">特色文化：藏戏、唐卡绘画、藏式唐卡、雪顿节、望果节等非物质文化遗产，
				以及酥油茶、青稞酒、藏面等特色饮食文化。<br></view>
		</view>
	</view>
	<view class="frame"><!-- 探索进度 -->
		<text class="citytitle1">探索进度<br></text>
		<text class="citytitle3">当前进度: {{pgList}}%</text>
		<progress :percent="pgList" show-info stroke-width="5" activeColor="#000000" />
	</view>

	<view class="frame"><!-- 城市选择/ -->
		<text class="citytitle2">选择城市</text>
		<view class="picker-wrap" @click="openPicker">
			<text class="selected-text">{{ selectedCity }}</text>
		</view>
		<picker mode="region" @change="onRegionChange" :value="regionValue">
		</picker>
	</view>

	<view class="frame"><!-- /视频宣传// -->
		<text class="citytitle2">西藏宣传</text>
		<video class="city-image" id="{{myVideoId}}" src="/static/xz-video.mp4" controls></video>
	</view>

	<view class="bgm-player"><!-- 音乐播放器 -->
		<view class="citytitle2">背景音乐播放器</view>
		<view class="music-info">
			<view class="citytitle2">西藏天籁 - 高原之音</view>
			<view class="citytitle3">藏族传统音乐</view>
		</view>
		<view class="progress-area">
			<text class="time">{{ formatTime(currentTime) }}</text>
			<view class="slider-container">
				<slider :min="0" :max="duration" :value="currentTime" @change="onSliderChange"
					@touchstart="onSliderStart" @touchend="onSliderEnd" activeColor="#69aaff" block-size="16"
					block-color="#619eff" />
			</view>
			<text class="time">{{ formatTime(duration) }}</text>
		</view>
		<view class="control-btn" @click="togglePlay">
			<text class="icon">{{ isPlaying ? '⏸️' : '▶️' }}</text>
		</view>
	</view>

	<view class="frame"><!-- 偏好设置 -->
		<view class="citytitle2">偏好设置</view>
		<view class="item">
			<view class="label">出行方式</view>
			<radio-group @change="chooseTravel">
				<label class="radio-item">
					<radio :value="0" :checked="travelType === 0" />公交
				</label>
				<label class="radio-item">
					<radio :value="1" :checked="travelType === 1" />自驾
				</label>
				<label class="radio-item">
					<radio :value="2" :checked="travelType === 2" />步行
				</label>
			</radio-group>
		</view>
		<view class="item">
			<view class="label">显示推荐景点</view>
			<switch :checked="showScenic" @change="toggleScenic" />
		</view>
		<view class="item">
			<view class="item-label">探索半径</view>
			<view class="slider-box">
				<slider min="1" max="30" value="5" @change="onRadiusChange" activeColor="#007aff" />
				<view class="radius-value">{{ radius }}km</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pgList: 60,
				timer: null,

				regionValue: ['西藏自治区', '林芝市', '墨脱县'],
				selectedCity: '西藏自治区 - 林芝市 - 墨脱县',


				travelType: 0, // 0-公交，1-自驾，2-步行
				showScenic: true,
				radius: 5,

				// 视频播放
				videoContext: null,
				showVideo: false,
				video: false,
				onReady: function(res) {
					this.videoContext = uni.createVideoContext('myVideo', this);
					setTimeout(() => {
						this.setData({
							video: true
						});
					}, 350);
					this.setData({
						showVideo: true
					});
				},

				//音频
				audioContext: null,
				isPlaying: false,
				currentTime: 0,
				duration: 0,
				isDragging: false,

				musicUrl: '/static/韩红 - 青藏高原.mp3'
			};
		},
		onLoad() {
			this.audioContext = uni.createInnerAudioContext();
			this.audioContext.src = this.musicUrl;

			this.audioContext.onCanplay(() => {
				this.duration = this.audioContext.duration || 0;
			});
			this.audioContext.onTimeUpdate(() => {
				if (!this.isDragging) {
					this.currentTime = this.audioContext.currentTime || 0;
				}
			});
			this.audioContext.onEnded(() => {
				this.currentTime = 0;
				this.isPlaying = false;
			});
		},
		onUnload() {
			this.audioContext.destroy();
		},

		// 富文本
		richTextNodes: [{
				name: 'a',
				attrs: {
					href: 'https://www.potala-palace.gov.cn/',
					target: '_blank'
				},
				children: [{
					type: 'text',
					text: '布达拉宫'
				}]
			},
			{
				type: 'text',
				text: '、'
			},
			{
				name: 'a',
				attrs: {
					href: 'https://lyj.xizang.gov.cn/lvyoujingdian/nmc/index.html',
					target: '_blank'
				},
				children: [{
					type: 'text',
					text: '纳木措'
				}]
			}
		],
		// 进度条
		onload() {
			this.startProgress();
		},
		onload() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},

		methods: {
			chooseTravel(e) {
				this.travelType = parseInt(e.detail.value);
			},
			toggleScenic(e) {
				this.showScenic = e.detail.value;
			},
			onRadiusChange(e) {
				this.radius = e.detail.value;
			},


			togglePlay() {
				if (this.isPlaying) {
					this.audioContext.pause();
				} else {
					this.audioContext.play();
				}
				this.isPlaying = !this.isPlaying;
			},
			onSliderChange(e) {
				const newTime = e.detail.value;
				this.currentTime = newTime;
			},
			onSliderStart() {
				this.isDragging = true;
			},
			onSliderEnd() {
				this.audioContext.seek(this.currentTime);
				this.isDragging = false;
			},
			formatTime(seconds) {
				if (!seconds) return '00:00';
				const minute = Math.floor(seconds / 60);
				const second = Math.floor(seconds % 60);
				return `${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
			},

			startProgress() {
				thi.timer = setInterval(() => {
					if (this.progress < 60) {
						this.progress++;
					} else {
						clearInterval(this.timer);
					}
				}, 50);
			},
			openPicker() {
				uni.createSelectorQuery().select('picker').boundingClientRect(rect => {
					uni.$emit('__uniapppickeropen', rect);
				}).exec();
			},
			onRegionChange(e) {
				const region = e.detail.value;
				this.regionValue = region;
				this.selectedCity = region.join(' - ');
			}
		}
	};
</script>

<style>
	.picker-wrap {
		padding: 15rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		text-align: center;
	}

	.selected-text {
		display: block;
		margin-top: 10rpx;
		color: #333;
	}
</style>